<template>
  	<div class="mask" v-show="props.show">
		<div class="container">
            <div class="content">
                <span class="title">修改昵称</span>
                <div class="close" @click="emit('close')">
                    <image src="/static/user/close.png" class="close-img"/>
                </div>
                <input class="c_input" type="text" v-model='name'  />
                <div class="footer flex-row">
                    <div class="cancel c_button" @click="emit('close')">
                        取消
                    </div>
                    <div class="confirm c_button" @click="handleConfirm">
                        保存
                    </div>
                </div>
            </div>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['close', 'onConfirm'])
const name = ref('')
const handleConfirm = ()=>{
    emit('onConfirm', name.value)
    emit('close')
}
</script>

<style lang="scss">
.container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .content{
        width: 622rpx;
        height: 376rpx;
        background: #FFFFFF;
        border-radius: 48rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .title{
            font-weight: 500;
            font-size: 40rpx;
            color: #252E3D;
            margin-top: 40rpx;
        }
        .close{
            position: absolute;
            top: 24rpx;
            right: 24rpx;
            width: 64rpx;
            height: 64rpx;
            background: #F5F8FA;
            border-radius: 36rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .close-img{
                width: 40rpx;
                height: 40rpx;
            }
        }
        .c_input{
            width: 558rpx;
            height: 80rpx;
            border-radius: 48rpx;
            background-color: #F0F3F7;
            margin-top: 40rpx;
            padding-left: 32rpx;
        }
        .footer{
            margin-top: 48rpx;
            .c_button{
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 40rpx;
                width: 268rpx;
                height: 80rpx;
            }
            .cancel{
                background-color: #F0F3F7;
            }
            .confirm{
				background: linear-gradient( 315deg, #ad90fc  0%,  #9D55F0 100%);
                margin-left: 22rpx;
            }
        }
    }
}
</style>